<template>
  <div>
    <div>
      <div>
        <van-nav-bar class="bag" left-text="返回" @click-left="onClickLeft" title="浏览历史">
          <template #right>
            <van-icon @click="alldel" name="delete" />
          </template>
        </van-nav-bar>
      </div>
      <div class="con pad">
        <div v-for="(item,index) in listarr" :key="index">
          <div>
            <div v-if="d1==item.data">今天-{{item.data}}</div>
            <div v-else-if="y1==item.data">昨天-{{item.data}}</div>
            <div v-else>{{item.data}}</div>
          </div>
          <van-swipe-cell v-for="(itm,idx) in item.list" :key="idx">
            {{itm.times}}
            <van-cell
              is-link
              :to="`/detail/${itm.id*1}`"
              :border="false"
              :title="itm.title"
              :value="rda(itm.time)"
            />
            <template #right>
              <van-button square type="danger" @click="dele(itm.id,index,idx)" text="删除" />
            </template>
          </van-swipe-cell>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getbrowing,
  setbrowing,
  timems,
  timestampToTime
} from "../utils/browing";
import { mendZero } from "../utils/commonality";
import { getStorage, addStorage } from "../utils/storage";
import { getbrow } from "../api/browing";
import { mapActions } from "vuex";
export default {
  name: "browing",
  data() {
    return {
      y1: "",
      d1: "",
      listarr: [],
      list: []
    };
  },
  methods: {
    ...mapActions("browing", ["getlist"]),
    rda(val) {
      return timems(val);
    },
    onClickLeft() {
      history.back();
    },
    alldel() {
      localStorage.removeItem("zxwx_20200424_browing");
      localStorage.removeItem("zx_coutdonw");
      this.listarr = [];
    },
    dele(id, index, idx) {
      this.listarr[index].list.splice(idx, 1);
      let arr = getStorage();
      arr.splice(1, 1);
      addStorage(arr, true);
      setbrowing(id, true);
    }
  },
  filters: {
    dateFrm: function(el) {
      return moment(el).format("YY-MM-DD");
    }
  },
  computed: {},
  async mounted() {
    let day1 = new Date();
    let y1 = day1.getTime() - 24 * 60 * 60 * 1000;
    let day2 = new Date();
    let d1 = day2.getTime();
    this.y1 = timestampToTime(y1);
    this.d1 = timestampToTime(d1);
    let listarr = getbrowing();
    let arr = [];
    for (let i = 0; i < listarr.length; i++) {
      arr.push(listarr[i].bdid);
    }
    let r = await getbrow({ bdid: arr });
    let data = r.data.data;
    console.log(data);
    data.forEach(element => {
      listarr.forEach(item => {
        if (item.bdid == element.id) {
          item["title"] = element.title;
        }
      });
    });
    listarr.forEach(item => {
      item.times = timestampToTime(item.time);
    });
    let list = [];
    for (let i = 0; i < listarr.length; i++) {
      if (list.findIndex(item => item.data == listarr[i].times) === -1) {
        const data = [];
        data.push({
          id: listarr[i].bdid,
          time: listarr[i].time,
          title: listarr[i].title
        });
        list.push({
          data: listarr[i].times,
          list: data
        });
      } else {
        list[list.findIndex(item => item.data == listarr[i].times)].list.push({
          id: listarr[i].bdid,
          time: listarr[i].time,
          title: listarr[i].title
        });
      }
    }
    this.listarr = list;
    console.log(this.listarr);
  }
};
</script>

<style scoped>
.con {
  position: absolute;
  top: 50px;
  width: 100%;
  bottom: 40px;
  overflow-y: auto;
}
.pad{
  padding: 0 15px;
}
</style>